<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FF</title>
<link rel='stylesheet' type='text/css'
	href='${pageContext.request.contextPath}/resources/foundation-5.2.0/css/foundation.css'></link>
<link rel='stylesheet' type='text/css'
	href='${pageContext.request.contextPath}/resources/custom.css'></link>
<style>
.chart div {
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 1px;
	color: white;
}

.chart rect {
	stroke: white;
	fill: steelblue;
}

.chart text.bar {
	fill: white;
}
</style>
</head>
<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
	var performances = ${performances}
	var awayPerformances = ${awayPerformances}
	var homePerformances = ${homePerformances}
	var home = ${home}
	var away = ${away}
	var player = ${player}

	</script>

	<div ng-app="myApp" ng-controller="PlayerCtrl">

		<div>
			<table style="width: 100%">
				<tr>
					<td class="text-center" colspan="11">{{player.name}}(<a
						href="${pageContext.request.contextPath}/team/${team.id}">${team.teamName}</a>)
					</td>
				</tr>
			</table>
		</div>
		<div>
			<table style="width: 100%;">
				<tr>
					<td class="text-center" colspan="2"><a href=""
						ng-click="orderByField='points';  venues='home';"
						ng-style="venues === 'home' && {'font-size': '120%'}">Home</a></td>
					<td class="text-center" colspan="15"><a href=""
						ng-click="orderByField='points';  venues='overall';"
						ng-style="venues === 'overall' && {'font-size': '120%'}">Overall</a></td>
					<td class="text-center" colspan="2"><a href=""
						ng-click="orderByField='points';  venues='away';"
						ng-style="venues === 'away' && {'font-size': '120%'}">Away</a></td>
				</tr>
			</table>
		</div>
		<div id="wrapper" style="width: 100%">
			<div id="left" style="float: left; width: 49%;">
				<table>
					<tr>
						<td class="text-center" colspan="11">Away</td>
					</tr>
					<tr>
						<th>Points</th>
						<th>Played</th>
						<th>Goals</th>
						<th>Assists</th>
						<th>Fouls Won</th>
						<th>Fouls Committed</th>
						<th>Blocked Shots</th>
						<th>Shots</th>
						<th>Intercepted</th>
						<th>Fouls W/C</th>
						<th>Avg. Points</th>

					</tr>
					<tr ng-repeat="performance in playerPerformances.away">

						<td>{{performance.points}}</td>
						<td>{{performance.gamePlayed}}</td>
						<td>{{performance.goals}}</td>
						<td>{{performance.assists}}</td>
						<td>{{performance.foulsWon}}</td>
						<td>{{performance.foulsCommitted}}</td>
						<td>{{performance.blockedShots}}</td>
						<td>{{performance.shotsOnTarget}}</td>
						<td>{{performance.passesIntercepted}}</td>
						<td>{{performance.foulsWonCommittedRatio| number:2}}</td>
						<td>{{performance.averagePoints| number:2}}</td>
					</tr>
				</table>
			</div>
			<div id="right" style="float: right; width: 49%;">
				<table>
					<tr>
						<td class="text-center" colspan="11">Home</td>
					</tr>
					<tr>
						<th>Points</th>
						<th>Played</th>
						<th>Goals</th>
						<th>Assists</th>
						<th>Fouls Won</th>
						<th>Fouls Committed</th>
						<th>Blocked Shots</th>
						<th>Shots</th>
						<th>Intercepted</th>
						<th>Fouls W/C</th>
						<th>Avg. Points</th>

					</tr>
					<tr ng-repeat="performance in playerPerformances.home">

						<td>{{performance.points}}</td>
						<td>{{performance.gamePlayed}}</td>
						<td>{{performance.goals}}</td>
						<td>{{performance.assists}}</td>
						<td>{{performance.foulsWon}}</td>
						<td>{{performance.foulsCommitted}}</td>
						<td>{{performance.blockedShots}}</td>
						<td>{{performance.shotsOnTarget}}</td>
						<td>{{performance.passesIntercepted}}</td>
						<td>{{performance.foulsWonCommittedRatio| number:2}}</td>
						<td>{{performance.averagePoints| number:2}}</td>

					</tr>
				</table>
			</div>
			<div style="clear: both;"></div>
		</div>
		<bars-chart chart-data={{playerPerformances.data}}></bars-chart>
		<bars-chart chart-data={{playerPerformances.awayPerfs}}></bars-chart>
		<bars-chart chart-data={{playerPerformances.homePerfs}}></bars-chart>


		<script type="text/javascript"
			src="${pageContext.request.contextPath}/resources/angular.min.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/resources/view/app.js"></script>
</body>
</html>